<template>
  <div class="single-list-filter-wrapper" @click.stop="clickBlank()">
    <div class="top-text-wrapper" @click.stop="showSingleListDialog()">
      <p class="left-select-text">{{placeHolderText}}</p>
    </div>
    <div class="drop-down-wrapper" v-show="showDropDown">
      <ul>
        <li v-for="(item,index) in singleListData" @click.stop="selectCurrentSingleObject(item,index)">
          <p class="single-filter-object" :class="{'selected-single-filter': currentSelectPosition == index}">
            {{item.selectName}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import TopFilter from '../filter/top-filter1.vue'
  import {bus} from './js/bus.js';
  const TAG = 'singleListFilter'
  export default {
    components: {},
    props: {
      defaultText: {
        type: String,
        default() {
          return '请选择'
        }
      },
      filter: {
        type: Object,
        default: null
      },
      type: { // 用于判断当前使用的是哪个筛选项，例如统筹区或者是年份，可选项：planArea(统筹区),years(年份)
        type: String,
        default() {
          return ''
        }
      }
    },
    created() {
      bus.$on('showDropDownDialog', (emitTag) => {
        if (emitTag == this._uid) {
          // 显示待选项
          this.showDropDown = !this.showDropDown
        } else {
          this.showDropDown = false
        }
      });
    },
    data() {
      return {
        placeHolderText: this.defaultText,
        currentSelectPosition: -1,
        showDropDown: false,
        singleListData:[]
      }
    },
    methods: {
      selectCurrentSingleObject(item, index) {
        // 选择列表项目
        this.placeHolderText = item.selectName
        this.currentSelectPosition = index
        this.$emit('confirmSingleSelect', item.selectId)
        this.showDropDown = false
      },
      showSingleListDialog() {
        // 通过发送时间消息显示当前下拉框，关闭其他下拉框
        bus.$emit('showDropDownDialog', this._uid)
      },
      //点击确定是传回选中的id值
      clickConfirm() {
        let chooseList = [];
        this.filter.nc.insuredType.map((item, index) => {
          if (item.checked) {
            chooseList.push(item.selectId)
          }
        })
        this.$emit('confirmSingleSelect', chooseList)
        this.showDropDown = false
      },
      clickBlank() {
      }
    },
    mounted(){
      document.querySelector('body').addEventListener("click", () => {
        this.showDropDown = false
      });

      if (this.type == 'planArea') {
        this.singleListData = this.filter.nc.planArea
      } else if (this.type == 'years') {
        let years = [];
        this.filter.years.forEach((item) => {
          years.push({
            selectId: item,
            selectName: item
          })
        })
        this.singleListData = years
        this.placeHolderText = this.singleListData[0].selectName
      }else if(this.type == 'freeSortType') {
        this.singleListData = this.filter.nc.freeSortType
        this.placeHolderText = this.singleListData[0].selectName
      }else if(this.type=='insuredType'){
        this.singleListData = this.filter.nc.insuredType;
        this.placeHolderText = this.singleListData[0].selectName
      }
      console.log(this.type + ' single-without-box:' + JSON.stringify(this.singleListData))
    }
  };
</script>

<style lang="scss">
  @import "topFilter.css";

</style>
